<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p><input type="text" id="ipt"></p>
    <div>未完成(<span id="sum"></span>)</div>
    <div id="play">
        <ul id="box">

        </ul>
        <div>已完成(<span id="num"></span>)</div>
        <ul id="stu">

        </ul>
    </div>
</body>

</html>

<script type="module">
    import cookie from './node_modules/js-cookie/dist/js.cookie.min.mjs'
    class Person {
        constructor(options) {
            this.reIpt = document.querySelector(options.reIpt)
            this.box = document.querySelector(options.box)
            this.stu = document.querySelector(options.stu)
            this.play = document.querySelector(options.play)
            this.num = document.querySelector(options.num)
            this.sum = document.querySelector(options.sum)
            this.list = []
            this.add()
            this.all()
            this.auto()
            this.del()
            this.chooseOne()
        }
        add() {
            this.reIpt.addEventListener('keyup', () => {
                if (event.keyCode == 13) {
                    if (this.reIpt.value == '') {
                        return alert('内容不能为空')
                    }
                    let obj = { title: this.reIpt.value, flag: false, edit: false }
                    this.list.push(obj)
                    this.setCookie()
                    this.reIpt.value = ''
                    this.auto()
                }
            })
        }
        setCookie() {
            cookie.set('list', JSON.stringify(this.list))
        }
        all() {
            if (cookie.get('list') == undefined) {
                this.list = []
            } else {
                this.list = JSON.parse(cookie.get('list'))
            }
        }
        auto() {
            let ing = ''
            let ed = ''
            let num = 0
            let sum = 0
            this.list.forEach((item, key) => {
                if (item.flag) {
                    num ++
                    ed += `<li><input type="checkbox" data-key="${key}" checked><span>${item.title}</span><button data-key="${key}">删除</button></li>`
                } else {
                    sum ++
                    ing += `<li><input type="checkbox" data-key="${key}"><span>${item.title}</span><button data-key="${key}">删除</button></li>`
                }
            })
            this.box.innerHTML = ing
            this.stu.innerHTML = ed
            this.num.innerHTML = num
            this.sum.innerHTML = sum

        }
        del() {
            this.play.addEventListener('click', () => {
                let k = event.target.dataset.key
                if (event.target.localName == 'button') {
                    this.list.splice(k, 1)
                    this.setCookie()
                    this.auto()
                }

            })
        }
        chooseOne() {
            this.play.addEventListener('click',()=>{
                let k = event.target.dataset.key
                if (event.target.localName == 'input') {
                    this.list[k].flag = !this.list[k].flag
                    this.setCookie()
                    this.auto()
                }
            })
        }
    }
    new Person({
        reIpt: '#ipt',
        box: '#box',
        stu: '#stu',
        play:'#play',
        num:'#num',
        sum:'#sum'
    })
</script>